<template>
  <el-dialog
    :title="dialogProps.title"
    :visible.sync="dialogProps.visible"
    width="650px"
    @open="handleDialogOpen()"
    v-loading="loading"
  >
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
    <el-form
      :model="checkItemModel"
      ref="checkItemForm"
      label-width="80px"
      label-position="right"
      size="small"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="编码" prop="code">
            <el-input :maxlength="32" v-model="checkItemModel.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="疾病名" prop="name">
            <el-input :maxlength="32" v-model="checkItemModel.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="预警等级" prop="warningLevel">
            <el-input :maxlength="32" v-model="checkItemModel.warningLevel"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="就诊科室" prop="clinicDepartmentId">
            <el-select class="parent-router-select" v-model="checkItemModel.clinicDepartmentId">
              <el-option
                v-for="item in mealsTypeList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="就医期限" prop="medicalTreatmentPeriod">
            <el-input v-model="checkItemModel.medicalTreatmentPeriod"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="异常类型" prop="exceptionTypes">
            <el-input :maxlength="32" v-model="checkItemModel.exceptionTypes"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="职业病" prop="occupationalDisease">
             <el-radio-group v-model="checkItemModel.occupationalDisease">
              <el-radio :label="0">是</el-radio>
              <el-radio :label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="适用性别" prop="gender">
            <el-select class="parent-router-select" v-model="checkItemModel.gender">
              <el-option value="2" label="不限"></el-option>
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="其他名称" prop="otherName">
            <el-input :maxlength="32" v-model="checkItemModel.otherName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="医学解释" prop="medicalInterpretation">
            <el-input
              class="properties-textarea"
              type="textarea"
              :rows="2"
              v-model="checkItemModel.medicalInterpretation"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="常见原因" prop="reason">
            <el-input
              class="properties-textarea"
              type="textarea"
              :rows="2"
              v-model="checkItemModel.reason"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="建议" prop="advise">
            <el-input
              class="properties-textarea"
              type="textarea"
              :rows="2"
              v-model="checkItemModel.advise"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleDialogClose()">取 消</el-button>
      <el-button type="primary" size="small" @click="submitForm('checkItemForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { saveMeals, updateMeals } from "@/api/dingming/diseaseLibrary";

export default {
  name: "checkItem-edit",
  data() {
    return {
      loading: false,
      checkItemModel: {
        id: "",
        code: "",
        name: "",
        clinicDepartmentId: "",
        medicalTreatmentPeriod:"",
        warningLevel: "",
        exceptionTypes: "",
        occupationalDisease: "",
        gender: "",
        otherName: "",
        medicalInterpretation: "",
        reason: "",
        advise: "",
        createtime: "",
        updatetime: "",
        tHealthPlanType: {
          id: "",
          name: "",
          createtime: "",
          updatetime: ""
        }
      },
      dialogProps: {
        visible: false, //控制对话框弹出收起
        action: "", //存入add || edit
        title: "" //存入对话框标题
      },
      mealsTypeList: []
    };
  },
  methods: {
    /**
     * 点击确定按钮后判断是添加还是修改
     */
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.dialogProps.action === "add") {
            this.doSaveCheckItem();
          } else {
            this.doUpdateCheckItem();
          }
        } else {
          return false;
        }
      });
    },
    /**
     * 修改的提交方法
     */
    doUpdateCheckItem() {
      this.loading = true;
      updateMeals(this.checkItemModel)
        .then(response => {
          this.loading = false;
          this.dialogProps.visible = false;
          this.$emit("save-finished");
        })
        .catch(error => {
          this.outputError(error);
        });
    },
    /**
     * 添加的提交方法
     */
    doSaveCheckItem() {
      this.loading = true;
      saveMeals(this.checkItemModel)
        .then(response => {
          this.loading = false;
          this.dialogProps.visible = false;
          this.$emit("save-finished");
        })
        .catch(error => {
          this.outputError(error);
        });
    },
    /**
     * 点击取消按钮
     */
    handleDialogClose() {
      this.dialogProps.visible = false;
    },
    /**
     * 弹框时触发的函数
     * 用来清除表单验证
     */
    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs["checkItemForm"].clearValidate();
      });
    },
    /**
     * 错误提示
     */
    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.loading = false;
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error"
      });
    }
  },
  /**
   * 传入父组件的方法
   * 用来判断用户点击的按钮是删除还是添加
   */
  mounted: function() {
    this.$nextTick(() => {
      this.$on("openEditCheckItemDialog", function(checkItem, mealsType) {
        this.mealsTypeList = mealsType;
        this.checkItemModel = checkItem;
        this.dialogProps.action = "edit";
        this.dialogProps.title = "修改疾病信息";
        this.dialogProps.visible = true;
      }),
        this.$on("openAddCheckItemDialog", function(mealsType) {
          this.checkItemModel = {};
          this.mealsTypeList = mealsType;
          this.dialogProps.action = "add";
          this.dialogProps.title = "添加疾病信息";
          this.dialogProps.visible = true;
        });
    });
  }
};
</script>

<style lang="scss" scoped>
.parent-router-select {
  width: 100%;
}
.CheckItem-info-tab-pane {
  margin-top: 10px;
}
</style>





